<script setup>
import { useCreate } from "@/store/useCreate.js";
import { ArrowUpBold } from "@element-plus/icons-vue";
import { watch, onMounted, ref } from "vue";
import { useRoute } from "vue-router";

const createStore = useCreate();

const stepActive = (item) => {
  createStore.setCurrentStepId(item.id);
};
const taggleStepMenu = (item) => {
  createStore.setHideSteps(item.id);
};

const isEdit = ref(false);
onMounted(() => {
  const queryParams = useRoute().query;
  if (queryParams.goodsId) {
    isEdit.value = true;
  }
});
</script>

<template>
  <div class="menu">
    <div
      class="menu-t"
      v-for="item of createStore.steps"
      :key="item.id"
      :class="{ hidden: createStore.hiddenSteps.includes(item.id) }"
    >
      <p class="main" @click="taggleStepMenu(item)">
        {{ item.name }} <el-icon><ArrowUpBold /></el-icon>
      </p>
      <div class="menu-b">
        <p
          class="main-c"
          :class="{ active: createStore.currentStepId === item2.id }"
          v-for="item2 of item.children"
          :key="item2.id"
          @click="stepActive(item2)"
        >
          <img
            v-if="item2.requiredNumber === 0"
            class="edit-status-icon"
            src="@/assets/edit-yes.png"
            alt=""
          />
          <img v-else class="edit-status-icon" src="@/assets/wait-icon.png" alt="" />
          <span class="main-c-i">{{ item2.name }}</span>
          <span
            class="edit-nums"
            :class="{ success: item2.requiredNumber === 0 }"
            v-if="item2.requiredNumber !== -1"
          >
            <template v-if="item2.requiredNumber === 0 || isEdit">已完成</template>
            <template v-else>{{ item2.requiredNumber }}必填项未填</template>
          </span>
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.menu {
  width: 240px;
  flex: 0 0 240px;
  background: #f9fafb;
  box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
  border-radius: 16px 16px 16px 16px;
  border: 1px solid #e5e7eb;
  overflow-y: auto;
}
.menu-t {
  &.hidden {
    .menu-b {
      display: none;
    }
  }
  .main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #191e28;
    cursor: pointer;
    background: #f9fafb;
  }
}
.menu-b {
  background: #fff;
  .main-c {
    padding: 16px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #191e28;
    cursor: pointer;
    &.active {
      background: #f0f1f3;
    }
    &:hover {
      background: #f0f1f3;
    }
  }
  .edit-status-icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }
  .main-c-i {
    flex: 1;
  }
  .edit-nums {
    color: #1dbf73;
    &.success {
      color: rgba(25, 30, 40, 0.24);
    }
  }
}
</style>
